<template>
  <div class="app-container-target home" style="height: 82vh; overflow-x: auto;" v-loading="loading">
    <el-form :model="queryParams" :inline="true">
        <el-form-item label="查询基准">
          <el-radio-group v-model="queryParams.dataType" @change="radioChange">
            <el-radio label="D">日别</el-radio>
            <el-radio label="W">周别</el-radio>
            <el-radio label="M">月别</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="时间" prop="startTime" label-width="40px">
          <div v-if="queryParams.dataType === 'D'">
            <WeekTimePicker type="date" v-model="queryParams.startTime" :options="disabledOptionsTwo" :clearable="false" style="width: 130px"/>
          </div>

          <div v-if="queryParams.dataType === 'W'">
            <WeekTimePicker type="date" v-model="queryParams.startTime" :options="disabledOptions" :clearable="false" style="width: 130px" @onChange="timeChange"/>
            <span style="margin-left: 10px; font-size: 12px; font-weight: 5 00;">{{ titleWeek }}</span>
          </div>

          <div v-if="queryParams.dataType === 'M'">
            <DatePicker type="month" v-model="queryParams.startTime" :options="disabledOptions" size="small" placeholder="Select month" style="width: 130px" :clearable="false"/>
          </div>
        </el-form-item>

        <el-form-item>
          <el-radio-group v-model="queryParams.radio" @change="getData()">
            <el-radio-button label="默认"/>
            <el-radio-button label="升序"/>
            <el-radio-button label="降序"/>
          </el-radio-group>
          <el-button style="margin-left: 100px;" type="primary" @click="getData">查询</el-button>
        </el-form-item>
    </el-form>

    <template v-for="(item, index) in dataAll">
      <div ref="myChart" id="chart" style="height: 260px; margin-bottom: 10px; border: 1px solid #aaa; border-radius: 4px;"></div>
      <t-ag-grid
      :style="{ height: getHeight(item.goldVsReturnList.length)}"
        style="margin-bottom: 10px;"
        :column-defs="index ? columnsDiewa : firstColumnsDiewa"
        :row-data="item.goldVsReturnList"
        :row-buffer="20"
        :header-height="0"
        :tooltipShowDelay="0"
        align="center"
        :getRowStyle ="getRowStyle"
        :defaultColDef = "{
          suppressMenu:true,
          flex: 1
        }"
        @cell-clicked="onCellClicked($event, index)"
        header-align="center"
      />

    </template>
  </div>
</template>

<script setup name="Imbricate">
  import moment from 'moment'
  import { list, firstColumnsDiewa, columnsDiewa,  getTableData, chartOptios } from "../config"
  import * as echarts from 'echarts'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const { proxy } = getCurrentInstance()

  const props = defineProps({
    Idle: {
      type: Object
    }
  })

  const queryParams = reactive({
    dataType: 'D',
    startTime: moment().subtract(2, 'day').format('YYYY-MM-DD'),
    radio: '默认'
  })

  const dataAll = ref([])
  const myChart = ref()
  let chart = null

  const titleWeek = ref('')
  const loading = ref(false)
  let _tempResData = ref()

  const disabledOptionsTwo = {
    disabledDate (date) {
      return date && date.valueOf() > (moment().unix() > moment(moment().format('YYYY-MM-DD 10:30:00')).unix() ? moment().valueOf() : moment().subtract(1, 'days').valueOf())
    }
  }

  const disabledOptions = {
    disabledDate (date) {
      return date && date.valueOf() > moment().valueOf()
    }
  }

  const radioChange = (val) => {
    if(val === 'W'){
      titleWeek.value = `${moment(queryParams.startTime).year()} 年 第 ${moment(queryParams.startTime).week()} 周`
    }
    if(val === 'D'){
      queryParams.startTime = moment().subtract(1, 'day').format('YYYY-MM-DD')
    }
  }

  const timeChange = () => {
    titleWeek.value = `${moment(queryParams.startTime).year()} 年 第 ${moment(queryParams.startTime).week()} 周`
  }

  const getRowStyle = (params) => {
    if(params.rowIndex === 0){
      return {
        background: '#bdd7ee'
      }
    }
  }

  const getHeight = (length) => {
    switch (length) {
      case 4:
        return '131px'
      case 2:
        return '67px'
      default:
        break
    }
  }

  const getTime = () => {
    if(queryParams.dataType === 'D'){
      return moment(queryParams.startTime).format("YYYY-MM-DD")
    } else if(queryParams.dataType === 'W'){
      return `${moment(queryParams.startTime).year()} 年 第 ${moment(queryParams.startTime).week()} 周`
    } else if(queryParams.dataType === 'M'){
      return moment(queryParams.startTime).format("YYYY-MM")
    }
  }

  const getData = () => {
    let _time = null

    loading.value = true

    if(queryParams.dataType === 'W'){
      _time = moment(moment(queryParams.startTime).format("YYYY-MM-DD")).startOf('week').format("YYYY-MM-DD")
    } else if (queryParams.dataType === 'M'){
      _time = moment(moment(queryParams.startTime).format("YYYY-MM-DD")).startOf('month').format("YYYY-MM-DD")
    } else if (queryParams.dataType === 'D'){
      _time = moment(queryParams.startTime).format("YYYY-MM-DD")
    }

    list({
      dateTime: _time,
      dataType: queryParams.dataType,
      eqpGroup: '叠瓦',
      queryTypeList: '待料率(%), 堵料率(%), 无计划率(%)'
    }, queryParams.radio).then((res) => {
      loading.value = false
      _tempResData.value = res.rows
      dataAll.value = getTableData(res.rows)

      nextTick(() => {
        myChart.value?.forEach((item, index) => {
          item.mark = item.innerText
          chart = echarts.init(item)
          const resizeObserver = new ResizeObserver((entries, b) => {
            if(echarts.getInstanceByDom(item)){
              echarts.getInstanceByDom(item).resize()
            }
          })
          resizeObserver.observe(item)
          echarts.getInstanceByDom(item).setOption(chartOptios(dataAll.value, index, res.rows[index].type, '叠瓦焊机', getTime()))
        })
      })
    })
  }

  watch(() => props.Idle, val => {
    queryParams.startTime = val.dataTime
    queryParams.dataType = val.dataType
    if(val.dataType === 'W'){
      titleWeek.value = `${moment(queryParams.startTime).year()} 年 第 ${moment(queryParams.startTime).week()} 周`
    }

    getData()

  }, { deep: true })

  const onCellClicked = ({ rowIndex, value, colDef }, idx) => {
    if(!rowIndex && !value.includes('待料率(%)')){
      if(!idx){
        let _time = null
        if(queryParams.dataType === 'W'){
          _time = moment(moment(queryParams.startTime).format("YYYY-MM-DD")).endOf('week').format("YYYY-MM-DD")
        } else if (queryParams.dataType === 'M'){
          _time = moment(moment(queryParams.startTime).format("YYYY-MM-DD")).endOf('month').format("YYYY-MM-DD")
        } else if (queryParams.dataType === 'D'){
          _time = moment(queryParams.startTime).format("YYYY-MM-DD")
        }

        router.push({
          path: '/indexAnalyse/timeTarget/idleTarget',
          state: {
            tabName: '叠瓦焊机',
            value: `H05-${value}`,
            selectedEpt: '设备线',
            dataTime: _time
          }
        })
      }
    }
  }

</script>

<style lang="less" scoped>

.app-container-target {
  margin: 0px 20px;
}
.el-radio {
  margin-right: 8px;
}
</style>